<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>

            /*在常规文档流中，两个块元素垂直方向上会产生一个外边距的合并*/
            .d1{
                width:200px;
                height: 200px;
                background:red;
                margin-bottom: 30px;
            }
            .d2{
                width:200px;
                height: 200px;
                background:green;
                margin-top:30px;
            }
            /*当一个元素包含在另一个元素中,如果父元素没有内容、边框、padding，共用外边距*/

            .d3{
                /*border:1px solid blue;*/
                padding:10px;
            }
            .d4{
                width:200px;
                height: 200px;
                background:red;
            }
        </style>
    </head>
    <body>
        <!--<div class="d1"></div>-->
        <!--<div class="d2"></div>-->
        <div class="d3">
            <div class="d4"></div>
        </div>
    </body>
</html>